<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeftBold, ArrowRight, ArrowRightBold } from "@element-plus/icons-vue";
import router from "@/router";

const select = ref('您的学历');
const id = ref('')
const buttonState = ref('left'); // 默认为'全日制'，表示左边按钮被选中
const state2 = ref('');
const restaurants = ref([]);
// 切换按钮状态的方法
const toggleButton = (side) => {
  buttonState.value = side;
};
const years = ref({
  startYear:2022,
  endYear:2026,
});

// querySearch 方法用于根据用户输入过滤建议列表
const querySearch = (queryString, cb) => {
  const results = queryString
      ? restaurants.value.filter(createFilter(queryString))
      : restaurants.value;
  cb(results);
};

// createFilter 方法用于创建一个过滤器
const createFilter = (queryString) => {
  return (restaurant) => {
    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  };
};

// handleSelect 方法用于处理用户选择建议项时的事件
const handleSelect = (item) => {
  console.log(item);
};

// loadAll 方法用于加载所有建议项的数据
const loadAll = () => {
  return [
    { value: '北京大学' },
    { value: '清华大学' },
    // ... 其他院校数据
  ];
};

// onMounted 钩子用于在组件挂载后立即加载建议项的数据
onMounted(() => {
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  console.log(dataFromPreviousPage);
  restaurants.value = loadAll();
});

// 定义一个函数来更新年份
function updateYears(delta) {
  Object.keys(years.value).forEach(key => {
    years.value[key] += delta;
  });
}

// 定义一个函数来检测滚动方向
function detectScrollDirection(event) {
  const delta = event.deltaY;
  if (delta > 0) {
    // 向下滚动
    updateYears(1);
  } else {
    // 向上滚动
    updateYears(-1);
  }
}

// 监听滚动事件
onMounted(() => {
  document.addEventListener('wheel', detectScrollDirection);
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  if (dataFromPreviousPage.degree) {
    select.value = dataFromPreviousPage.degree;
  }
  if (dataFromPreviousPage.school) {
    id.value = dataFromPreviousPage.school;
  }
  if (dataFromPreviousPage.major) {
    state2.value = dataFromPreviousPage.major;
  }
  if (dataFromPreviousPage.startYear) {
    years.value.startYear = dataFromPreviousPage.startYear;
  }
  if (dataFromPreviousPage.endYear) {
    years.value.endYear = dataFromPreviousPage.endYear;
  }
  if (dataFromPreviousPage.educational_system) {
    if (dataFromPreviousPage.educational_system === '全日制') {
      buttonState.value = 'left';
    } else {
      buttonState.value = 'right';
    }
  }
  console.log(dataFromPreviousPage);
});
const next = () => {
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  dataFromPreviousPage.school = id._value
  dataFromPreviousPage.degree = select._value
  console.log(years)
  dataFromPreviousPage.startYear = years._value.startYear
  dataFromPreviousPage.endYear = years._value.endYear
  if (buttonState.value === 'left') {
    dataFromPreviousPage.educational_system = '全日制';
  } else {
    dataFromPreviousPage.educational_system = '非全日制';
  }
  dataFromPreviousPage.major = state2._value
  console.log(dataFromPreviousPage)
  localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));

  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/second');
};
const upload = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/upload');
};

</script>

<template>
<form class="body1" style="background-color: #f9f7f7;background-size: cover;">
<el-row justify="center">
  <el-col :span="4" style="margin: auto"><el-icon size="128px" color="#bbbbbb"><ArrowLeftBold /></el-icon></el-col>
  <el-col :span="16" style="justify-content: center;text-align: center;">
    <h1>仅需三步，生成智能简历</h1>
    <div class="card3">
      <el-row :gutter="30" justify="space-around">
        <el-col :span="8" >
          <div style="background-color: #3F72AF;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 100px;margin-right: 50px "></div>
        </el-col>
        <el-col :span="8" >
          <div style="background-color: #f9f7f7;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 50px;margin-right: 10px "></div>
        </el-col>
        <el-col :span="8" >
          <div style="background-color: #f9f7f7;width: 150px;height: 30px;border-radius: 10px;margin-top: 50px;margin-left: 10px;margin-right: 50px "></div>
        </el-col>
      </el-row>
      <el-row>
        <el-input
            v-model="id"
            style="max-width: 400px;margin-top: 50px;margin-left: auto;margin-right: auto"
            placeholder="具体院校"
            class="input-with-select1"
            size="large"
        >
          <template #prepend>
            <el-select v-model="select" placeholder="" size="large" style="width: 115px;">
              <el-option label="本科" value="1" />
              <el-option label="专科" value="2" />
              <el-option label="985/211" value="3" />
              <el-option label="其他" value="4" />
            </el-select>
          </template>
        </el-input>
      </el-row>
      <el-row class="button-group">
        <button
            :class="{ 'active': buttonState === 'left', 'inactive': buttonState !== 'left' }"
            @click="toggleButton('left')"
            type="button"
        >
          全日制
        </button>
        <button
            :class="{ 'active': buttonState === 'right', 'inactive': buttonState !== 'right' }"
            @click="toggleButton('right')"
            type="button"
        >
          非全日制
        </button>
      </el-row>
      <el-row>
        <el-autocomplete
            v-model="state2"
            style="width: 400px;margin-top: 30px;margin-left: auto;margin-right: auto;"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            size="large"
            clearable
            class="autocomplete"
            placeholder="具体专业"
            @select="handleSelect"
        />
      </el-row>
      <el-row gutter="120" justify="center">
        <el-col span="2">
          <h2>入学年份</h2>
          <p class="low_year">{{ years.startYear-2 }}</p>
          <p class="year">{{ years.startYear-1 }}</p>
          <p class="high_year">{{ years.startYear }}</p>
          <p class="year">{{ years.startYear+1 }}</p>
          <p class="low_year">{{ years.startYear+2 }}</p>
        </el-col>
        <el-col span="2">
          <h2>毕业年份</h2>
          <p class="low_year">{{ years.endYear-2 }}</p>
          <p class="year">{{ years.endYear-1 }}</p>
          <p class="high_year">{{ years.endYear }}</p>
          <p class="year">{{ years.endYear+1 }}</p>
          <p class="low_year">{{ years.endYear+2 }}</p>
        </el-col>
      </el-row>
    </div>
  </el-col>
  <el-col :span="4" style="margin: auto"><el-icon size="128px" color="#3F72AF" @click="next"><ArrowRightBold /></el-icon></el-col>
</el-row>
</form>
  <button ref="labelIWantToHire" class="change" style="color: #3F72AF;font-weight: bold;font-size:12px;
  z-index: 99;position: absolute; top: 63%; right: 120px; transform: translateY(50%);background-color: #f9f7f7;box-shadow: 5px 5px 5px 2px #444444;"
          @click="upload"
  >
    已有简历？直接上传！</button>
</template>

<style scoped>
@import "../../assets/css/global.css";
.input-with-select1:deep(.el-input__wrapper) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 0 10px 10px 0;
  outline: #3F72AF 1px solid;
}
:deep(.el-input-group__prepend) {
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0  0 10px;
  outline: #3F72AF 1px solid;
}
:deep(.el-input__wrapper){
  background-color: #f9f7f7;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px;
  outline: #3F72AF 1px solid;
}
.button-group {
  display: flex;
  gap: 100px; /* 按钮之间的间隔 */
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
}

button {
  padding: 10px 40px;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 15px;
}

/* 活动状态按钮样式 */
.active {
  background-color: #3F72AF; /* 蓝色背景 */
  color: #f9f7f7; /* 白色文字 */
}

/* 非活动状态按钮样式 */
.inactive {
  background-color: #f9f7f7; /* 白色背景 */
  color: #3F72AF; /* 蓝色文字 */
}
.high_year{
  font-size: 24px;
  font-weight: bold;
  color: black;
  background-color: rgba(52,124,175,0.11);
}
.year{
  font-size: 22px;
  color: #444444;
}
.low_year{
  font-size: 16px;
  color: #888888;
}
</style>